<template>
  <div class="box">
    <!-- 头部导航 -->
    <div class="header">
      <van-nav-bar title="我的嗨购" @click-left="$router.back()">
        <!-- 左箭头 -->
        <template #left>
          <van-icon name="arrow-left" size="18" color="black" />
        </template>
        <!-- 右图标 -->
        <template #right>
          <van-popover v-model="showPopover" theme="dark" trigger="click" :actions="actions" placement="bottom-end"
            @select="onselect">
            <template #reference>
              <van-icon name="ellipsis" size="18" color="black" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </div>
    <!-- 个人 -->
    <div class="main">
      <div class="top10">
        <div class="yi">
          <img
            src="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png"
            alt=""
          />
        </div>
      </div>
      <div class="top10">
        <van-cell title="收货地址管理" is-link size="large" @click='$router.push("/address")' />
      </div>
        <van-cell title="全部订单" is-link size="large" @click='$router.push("/orderlist")' />
      <div class="top10">
        <van-cell title="账户与安全" is-link size="large" />
        <van-cell title="修改密码" is-link size="large" @click='$router.push("/password")' />
        <van-cell title="隐私设置" is-link size="large" />
      </div>
      <div class="top10">
        <van-cell title="联系客服" is-link size="large" />
        <van-cell title="退出登录" is-link size="large" @click='backlogin' />
      </div>

    </div>
  </div>
</template>
  
<script>
import Vue from 'vue';
import { Cell, CellGroup } from 'vant';

Vue.use(Cell);
Vue.use(CellGroup);
export default {
  data() {
    return {
      // 头部导航
      showPopover: false,
      actions: [
        { text: '首页', icon: "wap-home-o" },
        { text: '购物车', icon: "cart-o" }],
      // 侧边导航分类
      categoryList: [],
      activeKey: '',
    }
  },
  methods: {
    // 导航右图下拉选项
    onselect(action, index) {
      switch (index) {
        case 0:
          this.$router.push('/home')
          break;
        case 1:
          this.$router.push('/cart')
          break;
        default:
          break;
      }
    },
    backlogin(){
          localStorage.clear()
          this.$router.push('/home')
        }
  },
}
</script>
<style scoped>
  .top10{
    margin-top: .1rem;
  }
  .main .yi{
    height: .9rem;
    background-color: white;
  }
  .yi img{
    height: .8rem;
    line-height: .8rem;
    margin-left: .2rem;
  }
</style>
  